<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框操作案例</title>
</head>
<body>
<table border="1" align="center" width="800px">
    <tr>
        <td><input type="checkbox" id="CK" onclick="fun1()"></td><!--选择框，供勾选的-->
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="person" value="1"></td><!--选择框，供勾选的-->
        <td>黄金标</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="person" value="2"></td><!--选择框，供勾选的-->
        <td>贾队长</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="person" value="3"></td><!--选择框，供勾选的-->
        <td>白翻译</td>
        <td>男</td>
    </tr>
    <tr>
        <td><a href="javaScript:fun2()">反选</a></td><!-- href="javaScript:fun2()表示该超链接跳转到一个事件-->
        <td> <a href="javaScript:fun3()">获取选中复选框的值</a></td><!--href="javaScript:fun3()表示获取选中复选框的值，可以用来执行批量删除-->
    </tr>
</table>
</body>
<script>
    /*利用JS完成复选操作*/
  function fun1() {
      /*1.先获取表头元素*/
      let ck = document.getElementById("CK");
      /*2.再获取列表的所有元素*/
      let person = document.getElementsByName("person");
      /*遍历这些元素，将每个元素的状态设置成表头元素一样*/
      for(let i=0;i<person.length;i++){
          person[i].checked=ck.checked
      }
  }
    function fun2() {
        /*1.先反选超链接元素*/
        let fx = document.getElementById("FX");
        /*2.再获取列表的所有元素*/
        let person = document.getElementsByName("person");
        /*遍历这些元素，将每个元素的状态设置成和本来的状态相反即可*/
        for(let i=0;i<person.length;i++){
            person[i].checked=!person[i].checked
        }
    }
    function fun3() {
        /*2.获取列表的所有元素*/
        let person = document.getElementsByName("person");
        /*定义一个数组，准备接受每个元素的value，这样得到了数组再处理就方便多了*/
        let arr=new Array();
        /*遍历这些元素，将每个元素的状态设置成和本来的状态相反即可*/
        for(let i=0;i<person.length;i++){
          /*判断每个元素是否被选中*/
          if(person[i].checked){
              let value = person[i].value;
              arr.push(value)
          }
        }
        alert(arr)
    }
</script>
</html>